<template>
  <div class="container">
    <!-- 大标题 -->
    <p class="p_title_big">{{ resultData.hospitalName }}-{{ resultData.formName }}</p>
    <!-- 描述 -->
    <p class="p_title">{{ resultData.descTitle }}</p>
    <p class="p_desc">{{ resultData.descValue }}</p>
    <!-- 用户信息 -->
    <p class="p_title">{{ resultData.userTitle }}</p>
    <p class="p_desc">{{ resultData.userValue }}</p>
    <!-- 备注1 -->
    <p class="p_title">{{ resultData.remarkTitle1 }}</p>
    <p class="p_desc">{{ resultData.remarkValue1 }}</p>
    <p class="p_title">{{ resultData.tableTitle }}</p>
    <!-- 表格 -->
    <el-table :data="tableData" :border="true" style="width: 100%" class="custom-table">
      <el-table-column
        v-for="(item, index) in tableHead"
        :key="index"
        :prop="item.prop"
        :label="item.prop.endsWith('_not_show') ? '' : item.prop"
        :width="item.width"
        header-align="center"
        align="center"
        class-name="columnHead"
      >
      </el-table-column>
    </el-table>
    <!-- 备注2 -->
    <p class="p_title">{{ tableData.remarkTitle2 }}</p>
    <p class="p_desc">{{ tableData.remarkValue2 }}</p>
  </div>
</template>

<script>
import { queryPrintInfoRequest } from '@/api/project/form'
export default {
  components: {},
  // 定义属性
  data() {
    return {
      formModel: {
        itemId: '',
        formKey: ''
      },
      resultData: {},
      tableHead: [],
      tableData: []
    }
  },
  computed: {},
  watch: {},
  methods: {
    queryInfo() {
      queryPrintInfoRequest(this.formModel).then((res) => {
        this.resultData = JSON.parse(res.data)
        if (this.resultData.tableData.length > 0) {
          // 表头数据处理
          const tableWidth = this.resultData.tableData[0]
          const tableHeads = this.resultData.tableData[1]
          for (let i = 0; i < tableHeads.length; i++) {
            if (tableHeads[i] == '' || tableHeads[i] == null || tableHeads[i] == undefined) {
              tableHeads[i] = 'index_' + (i + 1) + '_not_show'
            }
            let obj = {}
            obj.prop = tableHeads[i]
            obj.width = tableWidth[i] ? tableWidth[i] : 100
            this.tableHead.push(obj)
          }
          let tableDataList = this.resultData.tableData.slice(2)
          tableDataList.forEach((item) => {
            let obj = {}
            for (let i = 0; i < item.length; i++) {
              obj[this.tableHead[i].prop] = item[i]
            }
            this.tableData.push(obj)
          })
        }
      })
    }
  },
  created() {
    console.log('created......')
    this.formModel.itemId = this.$route.query.id
    this.formModel.formKey = this.$route.query.formKey
  },
  mounted() {
    this.queryInfo()
    console.log('mounted......')
  },
  updated() {
    console.log('updated......')
  },
  destroyed() {
    console.log('destroyed......')
  },
  activated() {
    console.log('activated......')
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
.container {
  width: 1000px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 0 20px;
}
.container p.p_title {
  font-size: 18px;
  font-weight: 700;
}
.container p.p_desc {
  font-size: 20px;
}
.container p.p_title_big {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
}

.custom-table {
  font-size: 20px;
}

::v-deep .columnHead > .cell {
  font-size: 20px;
  width: 100%;
}
</style>
